Why should we care? 



Making your website available and 
usable to all people, regardless of 
physical or mental capabilities 







It’s the Law 



• ADA (American Disabilities Act) 

• Title II, which states that communications with persons with disabilities must be 
"as effective as communications with others" 

• Title III, which deals with 

• Rehabilitation Act - Section 508 

• Businesses must comply with Section 508 when supplying Electronic and 
Information Technology goods and services to the federal government. 

• Especially applicable: 

1 194.22 Web-based intranet and internet information and applications 

• Individuals with Disabilities Education Act (IDEA) 

• Teaching curriculum is less likely to be included if it is not easily accessible to 
all students. 

http://www.access-board.gov/guidelines-and-standards 

http://webaim.org/articles/laws/usa/ 

http://uxmag.com/articles/accessibility-and-the-law 
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But they’re a minority, right? 

• 19.9 million (8.2%) have difficulty lifting or grasping. This 
could, for example impact their use of a mouse or 
keyboard 

• 15.2 million (6.3%) have a cognitive, mental, or emotional 
impairment. 

• 8.1 million (3.3%) have a vision impairment. These people 
might rely on a screen magnifier or a screen reader, or 

might have a form of color blindness. 

• 7.6 million (3.1%) have a hearing impairment. They might rely 
on transcripts and /or captions for audio and video media. 



The Myth of the "Minority User" Google 

Worldwide Internet Usage Compared With US Access Needs 



China 

IM 




Czech Republic ■ 
United Dexterity I 



I (World) People who 
use the Internet 
I (US only) Users 
with accessible 
needs 



0 



100.000,000 200,000/100 300,000,000 



Somes. IkMd Bank m 2008) and C0C.gw(NHI Suvey, 2008) 



http://www.interactiveaccessibilitv.com/accessibilitv-statistics 
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SEO Ranking 



• While Google and others don’t directly rank based 
on accessibility, SEO & Accessibility are related. 

• Improving your accessibility - intuitive navigation, 
logical headers, labeled images + links - will 
improve SEO 



Who is it for? 
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The Visually Impaired 

• Color Blindness 

• High contrast between 
images and colors. 

• Partial Blindness 

• High contrast colors 

• Users may rely on text 
magnification 

• Avoid small text 

• Full Blindness 

• Users will use screen readers 

http://www.colourblindawareness.org/colour-blindness/tvpes-of-colour-blindness/ 
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Color blindness photos: (Left to Right, 
Top to Bottom) 

Normal - Protanopia 
Deuteranopia - Tritanopia 
Achromatopsia 



The Motor Impaired 



• Mouth Sticks 

https://voutu.be/M6-To6bvpwl? 

t=24s 

• Make buttons/links keyboard 
accessible 

• Skip Navigation link 




Image from: 

http://davidpierini.com/press/the-long- 

road-back/ 



The Hearing Impaired 

• Supply captions/transcripts 

• Do not rely on sounds/audio alerts to convey 
information 



General Accessibility 



• Make use of the css :focus & js .focusQ for all 
buttons, links, clickable objects 

• Keep your DOM content in order with the visual 
appearance. (Don’t tab through links in an 
unexpected way) 
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How to diagnose 
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Webaim’s WAVE plugin 

• http://wave.webaim.org/ 

• Google Chrome & Firefox extensions 

• Will catch most glaring problems 

• Will recognize the fixes you have made 

• Explains problems & recommends fixes 
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Before WAVE 




r WAVE 



{o' 
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■ssibility cv 

| No Styles Contrast 

Summary 

WAVE has detected the following: 

1 64 Errors 
162 Alerts 



1 50 Structural Elements 
inel Options 

f DETAILS: A listing of all the WAVE 



, OUTLINE: The heading str 



Search the history of over 439 billion pages on the Internet. 
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Copyright Office 
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Web Archiving 
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Advanced Search 





After WAVE 

- lots of red 

- a couple green 



©WAVE 

web accessibility 



No Styles 

Documentation 



0 



□ 



Missing form I 




-Details on the missing form label 
-WAVE documentation on the missing 
label 



• r 



and larger clickable targets for form 

How to Fix It 

If a text label for a form control is visil 
use the <dabol> element to associate 
with its respective form control. If thei 
no visible label, either provide an 



of that form control may no 



I, does not surround any other form 
Is. and does not reference another 



1.1 Non-text Content (Level A) 





Internet Archive is a 

non-profit library of millions 
of free books, movies, 
software, music, and 
more. 

■I. BBB@ 



s 

Announcements 



Digitization: No 

____ Extended Collective 

{document.location.href=7/vve:> ; C^WJJJ/'/’+SCfnav-wb-urn.valOilreturn false;"> 

<span class=' conochive-sea'Ctr> 

E3<input ld=“nav-wb-ur * class="form-control input-sm roundbox20" type="text" placeholder="http //vv> 
oncMck="$(this).css('paddmg-left',").parent().find( , .iConodiive-search').hide<)'> 

</dlv> 



-expanded code for details 




Donate page I recently redid 



How would you like to 
contribute? 



A Message from Internet Archive Founder, Brewster Kahle 



One-Time Gift 



Monthly Sustaining 
Member 




Pay with a credit card 



P PayPa! 

bitcoin 



Dear kelsey. archive, 

I founded the Internet Archive as a non-profit with a huge goal: 
to give everyone access to all knowledge— the books, web 
pages, audio, television and software of our shared human 
culture. Forever. 

Together we are building the digital library of the future. A place 
where we can all go to learn and explore. 

At the Internet Archive, people download 20 million books each 
month. We get more visitors in a year than most libraries do in a 
lifetime. The key is to keep improving— and to keep it free. 

That's where you can help us. 

The Internet Archive has only 1 40 staff but runs the -#250 
website in the world. We don't run ads. We don't sell your personal information. But we still 
need to pay for servers, staff and rent. 

For the cost of buying a book, you can make a book permanently available for the next 
generation. Please consider donating S50, $75, $100 or whatever you can afford to 
support Internet Archive. It’s a small amount to inform millions. Help us do more. 

Thank you. 

Brewster Kahle 

Founder & Digital Librarian 

Please make a tax-deductible donation now. 

You will receive an email confirmation that can be used for your tax records. 











Passes the content with flying green 
colors 

(Nav is sitewide known broken ) 



Spectrum Chrome Extension 



• Spectrum - Chrome Webstore 

• “Instantly test your web page with different types of 
color vision deficiency.” 

• Helps designers + developers be aware of their 
color choices and how viewable a page’s content is 





O bitcoin 



A Message from Internet Archive Founder, Brewster Kahle 









Obitcoin 





bitcoin 







Donate page with: (Left to Right, Top 
to Bottom) 

Normal - Protanopia 
Tritanopia - Achromatopsia 
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Screen Readers 



• JAWS (Windows) 

• Window-Eyes (Windows) 



Primary Screen Readers 

100%i 

75% 




■ JAWS - 49% 

■ Window-Eyes - 12% 

■ VoiceOver - 9% 

■ NVDA- 14% 

■ SA or SAToGo - 10% 

■ ZoomText - 3% 

■ ChromeVox - 0% 

■ Others - 2% 



• Voice Over (Mac) 

• NVDA 



Screen Readers Commonly Used 

100%-, 




h t tp:// w e b ai m . org / prQ j e cts/s cre enread ers u rve y 4 / 
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■ JAWS - 64% 

■ Window-Eyes 21% 

■ VoiceOver - 31% 

■ NVDA - 43% 

■ SA or SAToGo -22% 

■ ZoomText - 7% 

■ ChromeVox - 3% 

■ Others - 6% 



Voice Over 

• Easy to setup on Mac (and iOS) 

• Read the Keyboard Command Shortcuts 
http://www.apple.com/accessibility/resources/ 

• Try it with Safari and Chrome (and Firefox) 

• Run through some tutorials 
http://webaim.org/articles/voiceover/ 




System Preferences -> Accessibility -> 
VoiceOver (Cmd+F5) 

Safari Preferences -> Advanced -> 
Accessibility 

check the box “Press Tab to highlight 
each item on a webpage” 

VoiceOver Command Charts at 

http://www.apple.com/accessibility/ 

resources/ 



How to code 
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Code to web standards 

Seriously. 

Run your html through the W3C validator. 

Valid HTML code is much easier for screen readers to 
parse and interpret. And the validator has some 
accessibility checking built in. 

We should be coding to web standards anyway. 
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https://validator.w3.org/ 



Logical Headings 

• Primary method for Screen Reader Navigation 

• Think about the order in which content will be 
consumed. Use an outline if it helps 

• Go in order: HI, H2, H3, H2, H3, HI 
Not: H3, HI, H4, H2, 

• Don’t skip headers! 








Unordered, skipped, unhelpful headers 

h6 - “0” ? 

hi, h2, h5, h6 




(ignore the nav bar, with all its h5’s....) 
Logical, ordered headers, with 
readable/useful text 
hi, h2, h2, h2, h2, hi, h2, h2 



Images 



The following examples are pulled 
from the above link about alt text 



• Use alt txt <img alt=“...” ...> 
http://webaim.org/techniques/alttext/ 

• Every image must have an alt attribute. It should 
contain the content and/or the function of the 
image. 

• Without alt text, a screen reader may resort to 
reading the entire url of the image, as a substitute 
for description. 
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Example 1 



f 

> 



Because of his role as the Commander in Chief of American forces in the 
Revolutionary War, and, later, the first President of the United States, George 
Washington is often called the "Father of his Country". 

/ 

What would be appropriate alternative text for the image in Example 1? 

A. 'Image of George Washington" 

B. 'George Washington, the first president of the United States" 

C. An empty alt attribute (alt=" ") will suffice. 

D. "George Washington" 
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Rules of Alt Txt 



The alt attribute should typically. 

• Be accurate and equivalent in presenting the same content and 
function of the image. 

• Be succinct. This means the correct content (if there is content) 
and function (if there is a function) of the image should be 
presented as succinctly as is appropriate. Typically no more than a 
few words. 

• NOT be redundant or provide the same information as text within 
the context of the image. 

• NOT use the phrases "image of ..." or "graphic of ..." to 
describe the image. 
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Because of his role as the Comrr 
Revolutionary War, and, later, th 
Washington is often called the " 


B 

lander in Chief of; 
e first President ol 
Father of his Coun 


\merican forces in the 
: the United States, George 
try’. 


What would be appropriate alternativi 

A. ’Image of George Washington" 

B. ’George Washington, the first presi 

C. An empty alt attribute (alt=” ”) i 

D. ’George Washington" 


s text for the imag 

dent of the United 
will suffice. 


e in Example 1? 
States" 



Alt Txt? 



Option D 

“George Washington” 
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Option A unnecessarily describes the 
image as an image. 

Option B provides extra information 
that is not presented directly in the 
image and it is also redundant with 
content presented later within the text. 
Option C (no alt attribute) is not 
appropriate because the image 
conveys content that is not directly 
presented in the surrounding context. 





Example 2 



f 

> 



George Washington 

Because of his role as the Commander in Chief of American forces in the 
Revolutionary War, and, later, the first President of the United States, George 
Washington is often called the "Father of his Country". 

What would be the appropriate alt attribute for the image in Example 2? 

A. "George Washington' 

B. An empty alt attribute (alt=" ") will suffice. 

C. "Image" 

D. The image does not need an alt attribute. 

v / 
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? 

> 



George Washington 

Because of his role as the Commander in Chief of American forces in the 
Revolutionary War, and, later, the first President of the United States, George 
Washington is often called the "Father of his Country". 



What would be the appropriate alt attribute for the image in Example 2? 

A. "George Washington" 

B. An empty alt attribute (alt=” ") will suffice. 

D. The image does not need an alt attribute. 



Alt Txt? 

Option B 
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Option A would be redundant. 

Option C provides extraneous and 
useless information. 

Option D (no alt attribute) is never the 
right choice - every image must have 
an alt attribute. 



Example 3 





W\ 




George Washington 



What would be the appropriate alt attribute for the image in Example 3? 

A. An empty alt attribute (alt=” ") will suffice. 

B. "Wikipedia entry for George Washington" 

C. "Read More’ 

D. "George Washington" 
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George Washington 



What would be the appropriate alt attribute for the image in Example 3? 

A. An empty alt attribute (alt=“ ") will suffice. 

B. "Wikipedia entry for George Washington" 

C. "Read More” 

D. "George Washington" 



Alt Txt? 

Option D 

“George Washington” 
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Option D - While the words "George 
Washington" in the alt attribute are 
redundant with the text that follows, in 
this case the redundancy is necessary 
to adequately describe the function. 
Option A is not adequate. An image 
that is the only thing inside a link must 
never have a missing or null alt 
attribute. This is because the screen 
reader must read SOMETHING to 
identify the link. 

Option B provides content that is not 
available through the image alone 



Example 5 

BBBB 

The 'Products’ image is part of a navigation bar. 

What would be the most appropriate alt attribute for the "Products" navigation image in 
Example 5? 

A. "Products’ 

B. "Link to Products" 

C. The image doesn't convey content, so (alt=" ") will suffice. 



Example 5 

The "Products' image is part of a navigation bar. 

What would be the most appropriate alt attribute for the "Products" navigation image in 
Example 5? 

A. "Products’ 

B. "Link to Products" 

C. The image doesn’t convey content, so (alt=" ") will suffice. 



Alt Txt? 

Option A 
“Products” 
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A describes both content & function 
Option B, is redundant (the screen 
reader will describe it as a link) 

Option C is untrue, there is content + 
function to convey without text within 
the link 






JJ 



• The title attribute, by definition, can be used to provide 
advisory information 

• Many elements support the title attribute. Many do not 

• This triggers a ‘tooltip’ in all modern browsers on 
focus/hover 

• Be careful overwriting/removing these with javascript 

• ALWAYS be used on a <frame> element 
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Bootstrap tooltips are an example of 
moving and removing the accessibility 
of tooltips, by creating their own 
version, stored in another attribute, 
and removing the title attribute from 
the DOM (and out of reach of screen 
readers) 

-NOT provide vital information or 
information necessary for accessibility. 
-NOT provide the same information as 
is available in text or alternative text. 
-NOT present the obvious. If the 



Links 

• Screen readers often navigate by links 

• Don’t use non-informative phrases (“click here”, 

“more”) 

• When linking to a resource, specify the resource type in 
the link text: <a href="form.pdf">Tax form (PDF)</a> 

• Be concise in conveying meaning (avoid wordy links, 
and avoid too short links) 

• Alert the user when a link will open in a new window/tab 

41 



- alerting a user of a link opening a 
new tab can be as simple as including 
a graphic in the link text (with 
appropriate alt txt of course) that the 
link will trigger a new window 



Links 

• Link contents & href should never be empty 

• Should be underlined. Users are accustomed to it. 

• If altering styling for mouse-over/hover, be sure to 
have the same effects for focus events too 

• NEVER style links with outline: 0 or outline: none 

Goody Two-Shoes 

Published c1888 

Topics Brothers and sisters . Orphans, Conduct of life, Education 



styling links with outline: 0 or outline: 
none, hides the focus indicator, and 
makes them less accessible 



Invisible Content? 



• Many sites include a Skip Navigation link, often 
hidden from users 

• There are limited cases when text should be 
hidden from sighted users, and ‘shown’ to blind 
users 

• Hidden links, such as Skip Nav, can be made 
hidden but focusable 



“In general, content should only be 
hidden from sighted users and made 
available to screen reader users when 
content is apparent visually, but not 
apparent to screen reader users.” 

Only ever use one Skip Nav link. More 
than that is gratuitous 



Invisible Content 



Phone number: ( [ | ) | | - extension 



• Form labels are a great example of when hidden content is 
appropriate 

• Phone number: 

(<label for="area" class="hidden">Area code</label> 

<input name="area" id="area" type="text" size="3" maxlength="3">) 
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No label is needed by a sighted user, 
as the function of the boxes is clear. 
However, a blind user would need an 
explanation of what each of the split 
boxes represents 



Hiding Content 

• visibility: hidden; and/or displaymone; ? 

• width:Opx, height:Opx or other 0 pixel sizing 
techniques ? 

• text-indent: -lOOOOpx; ? 

• position: absolute ! important; 
clip: rect(1px, Ipx, Ipx, Ipx); 

• Absolutely positioning content off-screen 



visibility: hidden; and/or dispiay.none ; 
These styles will hide text from all 
users. The text is removed from the 
visual flow of the page and is ignored 
by screen readers. Do not use this 
CSS if you want the content to be 
read by a screen reader. But DO use 
it for content you don't want read by 
screen readers. 

width:Opx, height:Opx or other 0 pixel 
sizing techniques 

As above, because an element with no 



CSS for hidden/focusable 

.hidden-but-focusable , . sr-only { 

/*http : / /webaim. org/ techniques/ css/ invisible content/*/ 

position: absolute; 

clip: rect(lpx, lpx, lpx, lpx) ; 

top: auto; 

width: lpx; 

height : lpx; 

overflow: hidden; 

} 

. hidden-butf ocusable : focus { 
position: static; 
width : auto; 
height : auto; 

outline: 5px auto -webkit-f ocus-ring-color ; 
outline-offset: -2px; 
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.sr-only is entirely hidden, and only 
‘seen’ by screen readers, 
.hidden-but-focusable are hidden, until 
tabbed or navigated to, then will 
appear on screen 



Tables 



• Make use of table captions to explain what data the 
table is presenting 

<tablexcaption> Table Explanation</caption> . . . . 

• Use table headers for row/column headers 

<trxth>Name</thxth>Age</th> </tr> 

• Add the scope attribute to each header, specifying 
whether it is a column or row header 



<table> 

<caption>Shelly's Daughters</caption> 
<tr> 

<th scope="col">Name</th> 

<th scope="col">Age</th> 

<th scope="col">Birthday</th> 

</tr> 

<tr> 

<th scope="row">Jackie</th> 

<td>5</td> 

<td>April 5</td> 

</tr> 

<tr> 

<th scope="row">Beth</th> 

<td>8</td> 

<td>January 1 4</td> 

</tr> 

</table> 
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Shelly's Daughters 



Name 


Age 


Birthday 


Jackie 


5 


April 5 


Beth 


8 


January 14 



Forms 



• Use labels: 

< label for=“name”>Name:</label> 

< in put id =“ name” type=“text” name=“textfield”> 

• Use fieldsets & legends for all checkbox & radio 
button groups 

• Use alt text for all input buttons that are of 
type=“image” 
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Forms 



• Use aria-labelledby if you have need to have two 
labels for one element (like in a table) 

• Use aria-describedby to link a another element 
that has more (or extra) description of the form 
element. 

• You can use a hidden <label>, a title, or an aria- 
label if a visible label doesn’t make sense. (Like on 
a search box) 



These add extra functionality/ 
accessibility helpers to your interface. 

Any element you think may be vaguely unclear, could probably have 
a couple of these added. 

Examples of role= : alert, button, navigation, checkbox, slider, 
toolbar, widget 

role’s only need to be applied on elements that normally do not serve 
that function (<div role=“checkbox”>) or whose function may not be 
clear without it (<div role=“ navigation” ’>) 

aria- are more helper attributes, some examples: 

aria-disabled, aria-haspopup, aria-invalid, aria-pressed, aria-controls 

Many of the aria- take true/false, but others require id’s to link to, or 
text describing the feature. 
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aria & role tags 







Javascript Accessible 

• Is it an element you can reach from the keyboard? 
Is it focusable? Is it keyboard ‘clickable’? 

• <div> & <span> are not navigable by keyboards. 

• Don’t rely on onclick=, or .clickQ 



JS cheat 



makeMouseElementAccessible = function (selector) { 

$ (selector) . attr ( "tabindex" , " 0 "). on ( "keypress keydown", 

function (e) { 

if (e. type != "click") { 

var code = (e.keyCode | | e. which); 
var k_space = 32; // space bar pressed 
var k_enter = 13; // enter key pressed 
if([k_space, k_enter ] . indexOf (code) != -1) { 

$ (this) . click ( ) ; 

} 

} 

}) ; 

}; 

makeMouseElementAccessible (" . accessible-link" ) ; 
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Sets a tabindex on the element, to 
allow it to be navigable + focusable 
Listens for a keypress (specifically an 
enter or space) and triggers a click 



Other tidbits 



• There is no way to detect a screen reader. 

• tabindex - don’t do it. It confuses blind users to start 
in the middle of a page 

• longdesc - is meant to contain a link to a longer 
description. Notthe text of an actual long description. 

• table summary, <thead>, <tfoot>, <tbody> - provide 
no accessibility functionality. They are meant for 
printing the table. 



tabindex=“0”, as used in the previous 
slide, is ok. tabindex=“0” enters that 
element into the index, making it 
reachable by keyboard, a tabindex of 
1 or higher makes the page start at 
those places, and skip content before 



Biggest Take-Aways 
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If nothing else... 

display:none & visibility:hidden hides it for everyone 

Make use of :focus anywhere you have :hover 

Make sure any clickable event is keyboard accessible 

Don’t make hacky code. (No div’s as links/buttons) 

Don’t rely on others to do make it accessible. (Bootstrap 
isn’t great) 

Think about all your users. Can everyone read, view, click, 
etc ? 
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Resources 
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• Web Accessibility in Mind - http://webaim.org 

• WAVE Browser plugin - http://wave.webaim.org 

• Screen Reader Simulation (requires flash) - http://webaim.ora/simulations/ 
scr ee nr eader-sim.htm 

• W3C Web Accessibility Initiative (WAI) - http://www.w3.org/WAI 

• W3C Web Content Accessibility Guidelines - http://www.w3.org/TR/WCAG20/ 

• W3C Aria- & Roles - http://www.w3.orq/TR/wai-aria/ 

• Apple’s VoiceOver - http://www.apple.com/accessibilitv/resources/ 

• Section 508 - http://section508.gov/ 

• Dev Blog posts: 

h t tp://de v . b l o g.archive. org /2 015 /0 2/17/w e b site-accessibility/ 

http ://dev. blog .archive .org/20 1 5/03/23/website-accessibi lity-part-2-archive-it- 

website/ 
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CSS for hidden/focusable 



. hidden-but— focusable , . sr-only { 

/*http : / /webaim. org/ techniques /css/ invisiblecontent/*/ 

position: absolute; 

clip: rect(0, 0, 0, 0) ; 

top: auto; 

width: lpx; 

height: lpx; 

overflow: hidden; 

} 

. hidden-but-focusable : focus { 
position: static; 
width : auto; 
height : auto; 

outline: 5px auto -webkit-f ocus-ring-color ; 
outline-offset: -2px; 
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.sr-only is entirely hidden, and only 
‘seen’ by screen readers, 
.hidden-but-focusable are hidden, until 
tabbed or navigated to, then will 
appear on screen 



JS cheat 



makeMouseElementAccessible = function (selector) { 

$ (selector) . attr ( "tabindex" , " 0 ")• on ( "keypress keydown", 

function (e) { 

if (e. type != "click") { 

var code = (e.keyCode | | e. which); 
var k_space = 32; // space bar pressed 
var k_enter = 13; // enter key pressed 
if([k_space, k_enter ] . indexOf (code) != -1) { 

$ (this) . click ( ) ; 

} 

} 

}) ; 

} ; 

makeMouseElementAccessible (" . accessible-link" ) ; 
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Sets a tabindex on the element, to 
allow it to be navigable + focusable 
Listens for a keypress (specifically an 
enter or space) and triggers a click 



